<template>
	<view class="pm">
		<view class="top">
			<view class="htitle">Remove Account</view>
			<view class="middle">
				<image class="middle-logo" src="/static/pm.png"></image>
				<view class="middle-name">Masayacash</view>
			</view>
			<view class="content">
				<view class="content-view">
					<image class="content-view-left" src="/static/guoqi.png"></image>
					<view class="content-view-qh">+63</view>
					<input type="number" maxlength="10" class="content-view-text margin-left60" placeholder="9XXXXXXXXX"
						v-model="client_phone" />
				</view>
				<view class="content-view mt24">
					<input type="number" :password="show" maxlength="6" placeholder="Enter 6-digit password"
						class="content-view-text" v-model="client_password" />
					<image @click="handleShow" class="content-view-right" :src="show ? '/static/e1.png':'/static/e2.png'">
					</image>
				</view>
			</view>
			<view class="bbbb" @click="deleteMA">
				REMOVE
			</view>
		</view>
	</view>
</template>

<script>
	import LongBreadcrumbMenu from "@/uni_modules/long-breadcrumb-menu/components/long-breadcrumb-menu/long-breadcrumb-menu.vue"
	export default {
		data() {
			return {
				selectTreeId: "",
				selectMenuName: "",
				phone: '',
				user_password: '',
				client_phone:'',
				client_password: '',
				show: true,
			}
		},
		methods: {
			onSelect: function(item) {
				this.selectTreeId = item.treeId;
				this.selectMenuName = item.groupName;
			},
			handleShow(){
				this.show =  !this.show
			},
			deleteMA() {

				if (this.client_phone.length == 0) {
					return uni.showToast({
						title: 'Please Enter phone number',
						icon: 'none'
					})
				}
				if (this.client_password.length == 0) {
					return uni.showToast({
						title: 'Please Enter 6-digit password',
						icon: 'none'
					})
				}

				uni.showLoading({
					title: 'loading...',
					mask: true
				})
				const _this = this;
				uni.request({
					url: 'http://api.pesomo.top/Mo/Login/withdraw_user_data',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					data: {
						client_phone: this.client_phone,
						client_password: this.client_password
					},
					timeout: 30000,
				}).then(res => {
					console.log("res===", res)
					uni.hideLoading()
					uni.showToast({
						title:res.data.state_msg,
						icon: 'none'
					})
					_this.client_phone = ''
					_this.client_password = ''
				}).catch(e=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pm {
		width: 100vw;
		min-height: 100vh;
	}

	.top {
		background-image: url(/static/logbg.png);
		background-size: 100% 100%;
		width: 750rpx;
		height: 750rpx;
		padding-top: 30rpx;
		box-sizing: border-box;

	}

	.htitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 18px;
		color: #fff;
		text-align: center;
		font-style: normal;
		text-transform: none;
		flex: 1;
		line-height: 46rpx;
		height: 46rpx;

	}


	.middle-logo {
		margin-top: 2rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 30rpx;
		border: 1px solid #fff;
	}

	.middle-name {
		padding-top: 50rpx;
		height: 40rpx;
		line-height: 40rpx;
		width: 160rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24px;
		text-align: center;
		font-style: normal;
		color: #fff;
	}

	.middle {
		margin-top: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.content {
		margin-top: 0rpx;
		width: 100vw;
		height: 234px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.mt24 {
			margin-top: 34rpx;
		}

		.margin-left60 {
			margin-left: 60rpx;
		}

		&-view {
			width: calc(100vw - 100rpx);
			margin: 0 50rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #EEEEEE;
			display: flex;
			flex-direction: row;
			padding: 0rpx 28rpx;

			&-left {
				width: 60rpx;
				height: 40rpx;
				margin-top: 27rpx;
			}

			&-qh {
				margin-left: 12rpx;
				width: 56rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #333333;
				line-height: 96rpx;
				height: 96rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			&-text {
				margin: 25rpx 0rpx;
				height: 46rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #8E8E8E;
				flex: 1;
			}

			&-right {
				width: 40rpx;
				height: 40rpx;
				margin-top: 28rpx;
			}
		}
	}

	.bbbb {
		margin: 150rpx 50rpx 0rpx;
		height: 96rpx;
		background: #4158A5;
		border-radius: 28rpx;

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>